<template>
  <div class='container'>
    <el-card>
      <div class="btn_wrapper">
      <span style="font-size:8px; color:#ffc0cb;">说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>

        <!-------------- form表单 下拉框 -------------->
      <div class="box-row">
        <el-row>
          <el-col :span="6">
            <el-form label-width="80px">
              <el-form-item label="学科">
                <el-select @change="subjectChange" v-model="reqList.subjectID" value="" placeholder="请选择" style="width:100%">
                  <el-option
                    v-for=" item in subjList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型">
                  <el-select v-model="reqList.questionType" style="width:100%">
                      <el-option
                        v-for="item in questionTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
              </el-form-item>
                <el-form-item label="题目备注">
                  <el-input v-model="reqList.remarks"></el-input>
                </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form label-width="80px">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="reqList.catalogID" style="width:100%">
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度">
              <el-select v-model="reqList.difficulty" style="width:100%">
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              </el-form-item>
                <el-form-item label="企业简称">
                  <el-input v-model="reqList.shortName"></el-input>
                </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form label-width="80px">
              <el-form-item label="标签">
                  <el-select v-model="reqList.tags" style="width:100%" placeholder="请选择">
                      <el-option
                        v-for="item in tagOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="方向">
              <el-select v-model="reqList.direction" style="width:100%">
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              </el-form-item>
                <el-form-item label="城市">
                   <el-row :gutter="24">
                      <el-col :span="11" style="padding-left:0px;padding-right:4px">
                          <el-select  @change="handleCity" v-model="reqList.province" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in cityOptions"
                              :key="item"
                              :label="item"
                              :value="item"
                            ></el-option>
                          </el-select>
                      </el-col>
                      <el-col :span="11" style="padding-left:0px;padding-right:4px">
                          <el-select v-model="reqList.city" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in areaOptions"
                              :key="item"
                              :label="item"
                              :value="item"
                            ></el-option>
                          </el-select>
                      </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
          </el-col>
           <el-col :span="6">
            <el-form label-width="80px">
              <el-form-item label="关键字">
                <el-input v-model="reqList.keyword" placeholder="根据题干搜索" />
              </el-form-item>
              <el-form-item label="录入人">
              <el-select v-model="reqList.creatorID" style="width:100%">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
              </el-form-item>
              <el-form-item>
                <el-row style="float: right">
                <el-button size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="serch">搜索</el-button>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>

        <!-- 消息提示 -->
       <div class="messageAlert">
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          :closable='false'
          show-icon>
        </el-alert>
        </div>

        <!----------- 数据列表 ------------>
        <el-table
          class="table"
          :header-cell-style="{background:'#fafafa' ,borderBottom: '2px solid #e8e8e8' }"
          :data="tableData"
        >
          <el-table-column
            fixed
            prop="number"
            label="试题编号"
            width="120px"
          />
          <el-table-column
            prop="subject"
            label="学科"
            width="110"
          />
          <el-table-column
            prop="catalog"
            label="目录"
            width="110"
          />
          <el-table-column
            prop="questionType"
            label="题型"
            width="110"
            :formatter="questionType"
          />
          <el-table-column
            prop="question"
            label="题干"
            width="280px"
          >
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="180"
          >
          <template #default='{row}'>
              {{formatTime(row.addDate)}}
          </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="120"
            :formatter="difficulty"
          />
          <el-table-column
            prop="creator"
            label="录入人"
          />
          <el-table-column
            label="操作"
            width="180px"
          >
            <template #default="{row}">

              <el-button
                type="primary"
                icon="el-icon-view"
                plain
                circle
                size="small"
                title="预览"
                @click="showqstions(row.id)"
              />

              <el-button
                type="success"
                icon="el-icon-edit"
                plain
                circle
                size="small"
                title="修改"
                @click="$router.push(`new?id=${row.id}`)"
              />

              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                size="small"
                title="删除"
                @click="removetions(row)"
              />

              <el-button
                type="warning"
                icon="el-icon-check"
                plain
                circle
                size="small"
                title="加入精选"
                @click="addChoice(row)"
              />

            </template>

          </el-table-column>
        </el-table>
                             <!-- 分页 -->
        <div class="paging">
          <el-pagination
            style="float: right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="reqList.page"
            :page-sizes="[2, 3, 4, 5]"
            :page-size="reqList.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </div>
    </el-card>
    <!-- 预览弹框 -->
    <questionsPro :isShowDialog.sync="isShowDialog" :list="list" ></questionsPro>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { list as quesList, remove, choiceAdd, detail } from '../../api/hmmm/questions'
import { simple as muLuList } from '../../api/hmmm/directorys'
import { simple as tagsList } from '../../api/hmmm/tags'
import { simple as userList } from '../../api/base/users'
import { provinces as getCity, citys as getArea } from '../../api/hmmm/citys'
import * as dayjs from 'dayjs'

import questionsPro from '../components/questions-preview'
export default {
  components: { questionsPro },
  data () {
    return {
      subjList: [], // 基础学科列表
      counts: 0, // 总页数
      reqList: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 城市
        city: null, // 地区
        page: 1, // 页码
        pagesize: 2 // 尺寸
      },
      questionTypeList: questionType, // 试题类型选项
      diffOptions: difficulty, // 难度选项
      directionOptions: direction, // 方向选项
      userOptions: [], // 录入人
      directoryOptions: [], // 二级目录
      tagOptions: [], // 标签选项
      cityOptions: getCity(), // 城市
      areaOptions: [], // 地区 当选择了城市的时候赋值
      tableData: [], // 列表数据
      isShowDialog: false, // 弹框
      showID: -1,
      list: {}
    }
  },
  async created () {
    // 用户
    const { data: userArr } = await userList()
    console.log(userArr)
    this.userOptions = userArr

    // 渲染
    this.getList()

    // 获取基础学科列表
    this.getSubjList()
  },
  methods: {
    // 获取基础学科列表
    async getSubjList () {
      const { data } = await simple()
      this.subjList = data
    },
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取基础题库列表数据
    async getList () {
      const { data } = await quesList(this.reqList)
      console.log(data)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 题型枚举
    questionType (row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 难度枚举
    difficulty (row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 删除列表数据
    async removetions (id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(id)
      this.$message.success('删除成功!')
      // 如果当前这一个只有一条数据 让page --
      if (this.tableData.length === 1 && this.reqList.page > 1) {
        this.reqList.page--
      }
      this.getList()
    },
    // 分页
    handleSizeChange (val) {
      this.reqList.page = 1
      this.reqList.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.reqList.page = val
      this.getList()
    },
    // 加入精选
    async addChoice (question) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({ id: question.id, choiceState: 1 })
      this.$message.success('加入精选成功')
      if (this.tableData.length === 1 && this.reqList.page > 1) {
        this.reqList.page--
      }
      this.getList()
    },
    // 试题详情
    async showqstions (id) {
      console.log(id)
      this.isShowDialog = true
      const { data } = await detail({ id })
      console.log(data)
      this.list = data
    },
    // 二级目录
    async subjectChange (subjectID) {
      this.reqList.catalogID = null
      this.reqList.tags = null
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await muLuList({ subjectID })
        this.directoryOptions = directoryArr
        // 标签下拉选项
        const { data: tagArr } = await tagsList({ subjectID })
        this.tagOptions = tagArr
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    // 城市地区
    handleCity (cityName) {
      // 地区选中的数据清空
      this.reqList.city = null
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName)
    },
    // 清除
    clear () {
      this.reqList = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1, // 页码
        pagesize: 10 // 尺寸
      }
      this.getList()
    },
    // 搜索
    async serch () {
      const { data: { items } } = await quesList(this.reqList)
      console.log(items)
      this.tableData = items
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
.btn_wrapper{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.box-row{
  margin-bottom: 10px;
}
.paging{
  margin-top: 10px;
}
.messageAlert{
  margin-bottom: 10px;
}

</style>
